// global transition css

/* fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

/* fade-transform */
.fade-transform--move,
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.5s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: all 0.5s;
}

.breadcrumb-leave-active {
  position: absolute;
}
//自定义表单表格格式
.devform {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  &-title {
    text-align: center;
    background: $--color-titlebg;
    font-weight: 600;
    font-size: 14px;
    padding: 10px;
    width: 100%;
  }
  .row {
    display: flex;
  }
  .row-right {
    display: flex;
    justify-content: left;
  }
  .col {
    flex: auto;
    display: flex;
  }
  .label {
    display: inline-block;
    width: 150px;
    text-align: right;
    padding: 5px 5px;
    border: 1px solid $--color-border;
    background: $--color-labelbg;
    display: flex;
    align-items: center;
    justify-content: right;
  }
  .felx0 {
    flex: 0 0 auto;
    .value {
      width: 215px;
    }
  }
  .red-icon::before {
    content: "*";
    display: inline;
    color: red;
    position: relative;
    top: 3px;
    margin-right: 3px;
  }
  .value {
    display: inline-block;
    border: 1px solid $--color-border;
    padding: 5px 5px;
    flex: 1;
    display: flex;
    align-items: center;
  }
  .colfelx {
    border: 1px solid $--color-border;
    flex: 1;
  }
  .left {
    text-align: left;
  }
}
//表单
.dev-form .el-form-item.w2.el-form-item--medium {
  width: 50%;
}
//表单
.dev-form .el-form-item.w3.el-form-item--medium {
  width: 33.3%;
}
.dev-form .el-form-item label.el-form-item__label {
  text-align: right;
  padding: 5px 5px;
  border: 1px solid $--color-border;
  background: $--color-labelbg;
  // height: 50px;
}
.dev-form .el-form-item__content {
  border: 1px solid $--color-border;
  // height: 50px;
  // padding: 7px 10px;
  padding: 5px 10px 10px 10px;
  flex: 1;
}
.dev-form .el-form-item.el-form-item--medium {
  margin-bottom: 0px;
}
.dev-form .el-form-item__content {
  margin-left: 0px !important;
}
.dev-form .el-form-item.el-form-item--medium {
  display: flex;
  width: 100%;
}
.dev-form .nopadd .el-form-item__content {
  padding: 0px;
}
form.el-form.dev-form {
  display: flex;
  flex-wrap: wrap;
}
//input的狂高度30， smallinput
.smallinput .el-input--medium .el-input__inner {
  height: 30px;
  line-height: 30px;
}
.smallinput .el-form-item__error {
  bottom: -2px;
  top: auto;
  left: 10px;
}
//数字输入框样式
.smallinput .el-input-number--medium .el-input-number__increase,
.smallinput .el-input-number--medium .el-input-number__decrease {
  height: calc(100% - 6px) !important;
  top: 3px !important;
  width: 32px;
}
//蓝色表格
.primary-table.el-table .el-table__header-wrapper th {
  background: #eaf3ff;
  height: 30px;
}
.primary-table .el-table--medium .el-table__cell {
  padding: 5px -px;
}
.dev-form-nodata {
  border: 1px solid $--color-border;
  background: $--color-labelbg;
  text-align: center;
  padding: 10px;
  color: #909399;
}
//自定义表单展示
.type2 {
  &-title {
    text-align: center;
    background: $--color-titlebg;
    font-weight: 600;
    font-size: 14px;
    padding: 10px;
  }
  .row {
    display: flex;
  }
  .row-right {
    display: flex;
    justify-content: left;
  }
  .col {
    flex: auto;
    display: flex;
  }
  .label {
    display: inline-block;
    width: 150px;
    text-align: right;
    padding: 5px 5px;
    border: 1px solid $--color-border;
    background: $--color-labelbg;
    display: flex;
    align-items: center;
    justify-content: right;
  }
  .value {
    display: inline-block;
    border: 1px solid $--color-border;
    padding: 5px 5px;
    flex: 1;
    display: flex;
    align-items: center;
  }
}
//数字输入框样式
.el-input-number--medium .el-input-number__increase,
.el-input-number--medium .el-input-number__decrease {
  height: calc(100% - 2px);
  top: 1px;
}
